<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="牛马时钟 - 精准计算你的每一份努力">
    <meta name="keywords" content="工资计算,薪资计算,牛马时钟,工资管理">
    <meta name="author" content="Cow Horse Clock">
    <title>牛马时钟 - 工资计算器</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="app-header" role="banner">
            <h1>牛马时钟</h1>
            <p class="subtitle">精准计算你的每一份努力</p>
        </header>
        
        <main class="main-content" role="main">
            <section class="salary-grid" aria-label="工资信息">
                <article class="salary-card animate-slide-in" style="animation-delay: 0.1s">
                    <h2>月薪</h2>
                    <p class="salary-amount" id="monthlySalary" aria-label="月薪金额">¥0.00</p>
                </article>
                
                <article class="salary-card animate-slide-in" style="animation-delay: 0.2s">
                    <h2>今日已得工资</h2>
                    <p class="salary-amount" id="todaySalary" aria-label="今日已得工资">¥0.00</p>
                </article>
                
                <article class="salary-card animate-slide-in" style="animation-delay: 0.3s">
                    <h2>本月已得工资</h2>
                    <p class="salary-amount" id="monthlyEarned" aria-label="本月已得工资">¥0.00</p>
                </article>
                
                <article class="salary-card animate-slide-in" style="animation-delay: 0.4s">
                    <h2>发薪日</h2>
                    <p class="payday" id="payDay" aria-label="发薪日信息">每月<span id="payDate">1</span>号</p>
                </article>
                
                <article class="salary-card animate-slide-in" style="animation-delay: 0.5s">
                    <h2>年薪</h2>
                    <p class="salary-amount" id="yearlySalary" aria-label="年薪">¥0.00</p>
                </article>
                
                <article class="salary-card animate-slide-in" style="animation-delay: 0.6s">
                    <h2>年终奖进度</h2>
                    <p class="salary-amount" id="bonusProgress" aria-label="年终奖进度">¥0.00</p>
                </article>
            </section>
            
            <section class="quick-actions" aria-label="快速操作">
                <button class="quick-action-btn" id="refreshBtn" aria-label="刷新数据">
                    <span class="icon">🔄</span>
                    刷新
                </button>
                <button class="quick-action-btn" id="shareBtn" aria-label="分享工资信息">
                    <span class="icon">📤</span>
                    分享
                </button>
            </section>
        </main>
        
        <nav class="tab-bar" role="navigation" aria-label="主导航">
            <button class="tab-button active" id="home-tab" aria-current="page">
                <span class="icon">🏠</span>
                首页
            </button>
            <button class="tab-button" id="settings-tab">
                <span class="icon">⚙️</span>
                设置
            </button>
        </nav>
    </div>
    
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner"></div>
        <p>正在计算...</p>
    </div>
    
    <script src="../../js/common.js"></script>
    <script src="js/home.js"></script>
</body>
</html>